// 导入VueUse插件中的 检测目标元素的可见性函数 useIntersectionObserver
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin= {
    install(app){
        // 全局注册指令
        app.directive('img-lazy', {
            mounted(el, binding){
              // el: 指令绑定的元素 img
              // binding: binding.value 指令等号后面绑定表达式的值 img.url
             
        
              const {stop}=useIntersectionObserver(
                el,  // 检测目标元素 img
                ([{ isIntersecting }]) => {
                    // isIntersecting 是否进入可见区域
                    console.log(isIntersecting);
                    if( isIntersecting ){
                        // 进入视口区域，则请求图片资源
                        el.src = binding.value
                        stop()
                      }
                },
            )
            }
          })
}

}
